<template>
	<div class="app-container app-height">
      <div class="bg-white">
		<el-form label-width="75px"  class="operation">
			<el-form-item label="表单位置:">
					<el-select v-model="from2.Tree1" class="associa-select" placeholder="请选择" @change="selectChang1">
					<el-option
						v-for="item in treeList"
					:key="item.id"
					:label="item.dirName"
					:value="item.id"
					>
					</el-option>
				</el-select>
				<el-select v-model="from2.Tree2"  class="associa-select" placeholder="请选择" @change="selectChang2"  v-show="selectTree2.length">
					<el-option v-for="item in selectTree2" 
					:key="item.id"
					:label="item.dirName"
					:value="item.id"></el-option>
				</el-select>
				<el-select v-model="from2.Tree3"  class="associa-select" placeholder="请选择" @change="selectChang3"  v-show="selectTree3.length">
					<el-option v-for="item in selectTree3" 
					:key="item.id"
					:label="item.dirName"
					:value="item.id"></el-option>
				</el-select>
				<el-select v-model="from2.Tree4"  class="associa-select" placeholder="请选择"  @change="selectChang4"  v-show="selectTree4.length">
					<el-option v-for="item in selectTree4" 
					:key="item.id"
					:label="item.dirName"
					:value="item.id" ></el-option>
				</el-select>
				<el-select v-model="from2.Tree5"  class="associa-select" placeholder="请选择"  @change="selectChang5"  v-show="selectTree5.length">
					<el-option v-for="item in selectTree5" 
					:key="item.id"
					:label="item.dirName"
					:value="item.id"></el-option>
				</el-select>
				<el-autocomplete
					v-model="dirName"
					v-show="baseList.length>0"
					class="associa-select"
					:fetch-suggestions="querySearchAsync"
					placeholder="请输入表名称"
					@select="handleSelect"
				></el-autocomplete>
			</el-form-item>
			<div>
			<el-form-item label="安全等级:" class="float-left">
				<el-select v-model="queryParams.safeLevel" placeholder="请选择安全等级">
					<el-option label="1" value="1"></el-option>
					<el-option label="2" value="2"></el-option>
					<el-option label="3" value="3"></el-option>
				</el-select>
				<el-checkbox  class="concern" v-model="queryParams.concern" @change="handleConcern">只显示我关注的</el-checkbox>
			</el-form-item>
			<!---<el-form-item label="负责部门：" class="float-left">
				<el-select v-model="queryParams.userId" placeholder="请选择" class="search-select-descen float-left">
					<el-option class="select-more-option"
					v-for="item in userList"
					:key="item.userId"
					:label="item.userName"
					:value="item.userId">
					</el-option>
				</el-select>
			</el-form-item>-->
			<el-form-item class="search-btn float-left" >
				<el-button
					type="primary"
					icon="el-icon-search"
					size="mini"
					class="search-btn-item"
					@click="searchBtn"
				>查询</el-button>
				<el-button
					type="primary"
					icon="el-icon-refresh"
					class="search-btn-item"
					size="mini"
					@click="uploadBtn"
				>刷新</el-button>
			</el-form-item>
			</div>
		</el-form>
		<el-table v-loading="loading" :data="DataList" :max-height="mapHeight" @sort-change="changeTableSort" border>
			<el-table-column label="表单名称" align="center" key="tableAlias" prop="tableAlias" width="199"  :show-overflow-tooltip="true">
			</el-table-column>
			<el-table-column label="表单名称（数据库）" align="center"  prop="tableName"  :show-overflow-tooltip="true" >
				<template slot-scope="scope">
					<a href="javascript:;" style="color:#409eff;" @click="handleGoto(scope.row)">{{scope.row.tableName}}</a>
				</template>
			</el-table-column>
			<el-table-column label="所属层级" align="center" key="dirPath" prop="dirPath" :show-overflow-tooltip="true" />
			<el-table-column label="安全等级" align="center" key="safeLevel" prop="safeLevel" />
			<!--<el-table-column label="负责部门" align="center" prop="updateCount" width="199" />-->
			<el-table-column label="数据行数" sortable align="center" prop="totalRow" width="199" />
			<el-table-column label="最近更新日期" sortable align="center" prop="updateTime" width="199" />
			<el-table-column label="关注" align="center" sortable prop="concern" width="199">
			 	<template slot-scope="scope">
				 	<img class="concern-icon" src="@/assets/images/DMS/system/concern.png"  @click="handleConcernIcon(scope.row)" alt="不关注" v-if="!scope.row.concern" >
					<img class="concern-icon" src="@/assets/images/DMS/system/concern-hover.png" @click="handleConcernIcon(scope.row)" alt="关注" v-if="scope.row.concern" >
				</template>
			</el-table-column>
		</el-table>
		 <pagination
			v-show="total > 0"
			:total="total"
			:page.sync="queryParams.pageNum"
			:limit.sync="queryParams.pageSize"
			@pagination="getmyDataList"/>
      </div>
	</div>
</template>
<script>
import {getDatabeseList} from '@/api/dataManagement/system/info';
import {mapTreeItem} from '@/api/dataManagement/system/dir'
import {myDataList,setConcern} from '@/api/dataManagement/system/mydata'
import {getHeight} from "@/utils/zkComm";
export default {
  name: "mapDetails",
  data(){
      return {
        // 遮罩层
        loading: false,
        // 用户表格数据
		  morehandleValue:'',
		  total:0,
		  DataList:[],
		  mapHeight:undefined,
		   // 查询参数
         queryParams: {
            pageNum: 1,
            pageSize: 10,
				tableName:undefined,
				safeLevel:undefined,
				concern:undefined,
				dirId:undefined,
         },
			from2:{
            Tree1:'',
            Tree2:'',
            Tree3:'',
            Tree4:'',
            Tree5:'',
         },
			selectTree1:[],
         selectTree2:[],
         selectTree3:[],
         selectTree4:[],
         selectTree5:[],
			treeList:[],
			baseList:[],
			prefix:'',
			dirId:'',
		  // 用户表格数据
         userList: [],
			dirName:'',
      }
  },
	created(){
		this.getTreeList();
		this.getmyDataList();
	},
	mounted(){
		this.mapHeight = getHeight(true)-60
	},
	methods: {
		// 获取btale list
		getmyDataList(){
			this.loading = true;
			this.queryParams.concern=!this.queryParams.concern? '' :this.queryParams.concern;
			myDataList(this.queryParams).then(res=>{
				this.DataList = res.rows;
				this.total = res.total;
				this.loading =false;
			})
		},
		changeTableSort(column){
			// "ascending" 升序  descending" // 降序
			var asc =  column['order']=='ascending' ? true : false
			this.queryParams.asc  =asc;
			this.queryParams.orderField  =column['prop'];
			this.getmyDataList();
		},
		// 获取库下的表
		DatabeseList(){
			this.baseList = []
			this.dirName =''
			getDatabeseList({dirId:this.queryParams.dirId}).then(res=>{
				var list = []
				if(res.rows.length>0) {
					for(var i=0;i<res.rows.length;i++){
					var obj = {}
					obj.value=res.rows[i].tableName
					obj.id=res.rows[i].id
					list.push(obj)
				}
				this.baseList = list
				}
			})
		},
		//显示是否关注
		handleConcern(){
			this.getmyDataList()
		},
		handleConcernIcon(row){
			// this.loading = true;
			console.log(row)
			var params = {
				concern:!row.concern,
				tableId:row.id
			}
			setConcern(params).then(res=>{
				if(res.code == 200){
					this.getmyDataList()
					this.loading =false;
				}
			})
		},
		
		handleGoto(row){
			this.$router.push("/DMS/myData/mydata/details/"+row.id+'?dirId='+row.dirId);
		},
		selectChang1(value){
         // console.log(this.treeList)
         this.from2.Tree2= ''
         this.selectTree2 = [];
         this.selectTree3 = [];
         this.selectTree4 = [];
         this.selectTree5 = [];
			this.dirName = '';
         for(var i=0;i<this.treeList.length;i++){
            if(this.treeList[i].id == value){
               this.selectTree2 = this.treeList[i].children
            }
         }
         this.prefix = '';
      },
      selectChang2(value){
         this.selectTree3 = [];
         this.selectTree4 = [];
         this.selectTree5 = [];
			this.dirName = '';
         for(var i=0;i<this.selectTree2.length;i++){
            if(this.selectTree2[i].children.length != 0 && this.selectTree2[i].id ==value) {
               this.selectTree3 = this.selectTree2[i].children
            }
            if(this.selectTree2[i].children.length == 0 && this.selectTree2[i].id ==value){
               this.prefix =this.selectTree2[i].prefix
               this.queryParams.dirId = this.selectTree2[i].id
            }
         }
      },
      selectChang3(value){
         this.selectTree4 = [];
         this.selectTree5 = [];
			this.dirName = ''
         for(var i=0;i<this.selectTree3.length;i++){
            if(this.selectTree3[i].children.length != 0 && this.selectTree3[i].id ==value) {
               this.selectTree4 = this.selectTree3[i].children
            }
            if(this.selectTree3[i].children.length == 0 && this.selectTree3[i].id ==value){
               this.prefix =this.selectTree3[i].prefix
               this.queryParams.dirId = this.selectTree3[i].id
            }
         }
      },
      selectChang4(value){
         this.selectTree5 = [];
			this.dirName = ''
         for(var i=0;i<this.selectTree4.length;i++){
            if(this.selectTree4[i].children.length != 0 && this.selectTree4[i].id ==value) {
               this.selectTree5 = this.selectTree4[i].children
            } 
            if(this.selectTree4[i].children.length == 0 && this.selectTree4[i].id ==value){
               this.prefix =this.selectTree4[i].prefix;
               this.queryParams.dirId = this.selectTree4[i].id;
            }
         }
      },
      selectChang5(value){
			this.dirName = '';
         for(var i=0;i<this.selectTree5.length;i++){
            if(this.selectTree5[i].children.length != 0 && this.selectTree5[i].id ==value) {
               this.selectTree6 = this.selectTree5[i].children
            } 
            if(this.selectTree5[i].children.length == 0 && this.selectTree5[i].id ==value){
               this.prefix =this.selectTree5[i].prefix;
               this.queryParams.dirId = this.selectTree5[i].id;
            }
         }
      },
		searchBtn(){
			this.getmyDataList()
		},
		uploadBtn(){
			this.queryParams ={
				pageNum: 1,
            pageSize: 10,
				tableName:undefined,
				safeLevel:undefined,
				concern:false,
				dirId:undefined,
			}
			this.selectTree1=[];
			this.selectTree2=[];
			this.selectTree3=[];
			this.selectTree4=[];
			this.selectTree5=[];
			this.from2={
            Tree1:'',
            Tree2:'',
            Tree3:'',
            Tree4:'',
            Tree5:'',
         };
		},
      getTreeList(){
         mapTreeItem().then(res=>{
            this.treeList =res.data.children
				// this.getmyDataList();
         })
      },
      querySearchAsync(queryString, cb) {
        var restaurants = this.baseList;
        var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;
          cb(results);
      },
      createStateFilter(queryString) {
        return (state) => {
          return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
        };
      },
      handleSelect(item) {
			this.queryParams.tableName = item.value
      }
	},
}
</script>

<style lang="scss" scoped>
/****
 reset element style
.
 */
 .el-col-3{
	 width:70px;
 }
 .el-col-2{
	 width:96px;
	 margin-right:10px;
 }
 /****
 reset element style
.

 */
 .app-container{
    padding:20px;
 }
 .operation {
	 height:43px;
	 line-height: 43px;
    margin-bottom:20px;
	 .search-select-parent{
		 width:320px;
	 }
	.concern{
		margin-left:10px;
	}
	.associa-select,.el-form-item{
		margin-right:10px;
	}
	.search-btn{
		margin-right:0px!important;
	}
 }
 .concern-icon{
	&:hover{
		cursor: pointer;
	}
 }
</style>